<script>
export default{
	props:{
		api:{
			type:Object,
			default(){
				return {}
			}
		},//api
		num:{
			type:Number,
			default:1
		},//上传限制数量
		fileup:{
			type:Object,
			default(){
				return {
					file:{},
					filelist:[],
				}
			}
		},//控件上传列表
		move:{
			type:Boolean,
			default:false
		}
	},
	data(){
		return {
			loading:false,//图片上传中
			previewVisible:false,
			previewImage:'',
		}
	},
	created(){

	},
	methods:{
		beforeUpload(file,fileList){
			console.log('beforeUpload',file,fileList)
			console.log(fileList.length,this.fileup.filelist.length);

			if(this.fileup.filelist.length>=this.num){
				this.$message.error('最多允许上传 ' +this.num+'张');
				fileList.splice(0,1)
				return false;
			}
			if(this.fileup.filelist.length+fileList.length>this.num){
				fileList.splice(0,1)
				this.$message.error('最多允许上传 ' +this.num+'张');
				return false;
			}

			const isimg = file.type === 'image/jpeg' || file.type === 'image/png';
			// if (!isimg) {
			// 	fileList.splice(0,1)
			// 	this.$message.error('You can only upload JPG file!',0);
			// }
			// const isLt2M = file.size / 1024 / 1024 < 2;
			// if (!isLt2M) {
			// 	fileList.splice(0,1)
			// 	this.$message.error('Image must smaller than 2MB!');
			// }
			// return isimg && isLt2M;
			return true;
		},//
		handleChange(info){
			console.log('info',info.file.status,info)
			if (info.file.status === 'uploading') {
				this.loading = true;
				return;
			}
			if (info.file.status === 'done') {
				this.$emit('done',info.file.response.data.url);
				this.loading = false;
			}
			if (info.file.status === 'error') {
				this.loading = false;
				this.$message.error('upload error');
			}
		},
		urlList(){
			console.log(111)
			let arr = [];
			this.fileup.filelist.forEach(item => {
				arr.push(item.response?.data?.url||item.url);
			});
			console.log(this.fileup.filelist,arr)
			return arr;
		},
		moveimg(k,ac){
			if(ac==-1 && k==0){return}
			if(ac==1 && k==this.fileup.filelist.length-1){return}
			let da = this.fileup.filelist[k];
			this.fileup.filelist.splice(k,1)
			this.fileup.filelist.splice(k+ac,0,da);
		},//移动文件位置
		removeFile(file){
			setTimeout(()=>{
				this.$emit('del',file)
			},50)
			return true
		}
	}
}
</script>
<template>
	<div class="imgupbase" :class="{showmove:move}">
		<a-upload
			:multiple="num>1"
			v-model:fileList="fileup.filelist"
			list-type="picture-card"
			class="avatar-uploader"
			:action="api.url"
			:headers="{token:$store.state.user.token}"
			:before-upload="beforeUpload"
			@change="handleChange"
			@preview="file=>{ previewImage=file.response?.url||file.url; previewVisible=true }"
			:remove="removeFile"
		>

			<div v-if="fileup.filelist.length < num" :disabled="loading">
				<loading-outlined v-if="loading"></loading-outlined>
				<plus-outlined v-else></plus-outlined>
				<div class="ant-upload-text">Upload</div>
			</div>
		</a-upload>
		<div class="movectr">
			<div class="flex" v-for="(v,k) in fileup.filelist">
				<div class="flex1" @click="moveimg(k,-1)"><FastBackwardOutlined /></div>
				<div class="flex1" @click="moveimg(k,1)"><FastForwardOutlined /></div>
			</div>
		</div>
		<a-modal :visible="previewVisible" :footer="null" @cancel="()=>previewVisible=false">
			<img alt="example" style="width: 100%" :src="previewImage" />
		</a-modal>
	</div>
</template>
<style lang="less" scoped>
.imgupbase{
	&.showmove{
		:deep(.ant-upload-list-picture-card-container){
			margin-bottom: 40px;
		}
		:deep(.ant-upload.ant-upload-select-picture-card){
			position: relative;
			z-index: 1;
		}
		.movectr{
			display:block;
		}
	}
	
}
.movectr{
	display:none;
	position: absolute;
	top: 110px;
	.flex{
		float: left;
		width: 86px;
		margin: 0 18px 123px 8px;
		text-align: center;
		background: rgba(0, 0, 0, .1);
		cursor: pointer;
		border-radius:6px;
		overflow: hidden;
		.flex1:hover{
			background: rgba(0, 0, 0, .3);
		}
	}
}
</style>